<template>
  <div class="apt-table">
    <h3 class="title2"><span>安许证审批结果公示</span></h3>
    <Form :wrapper-col="{ span: 14 }" class="pb20">
      <Row :gutter="[0,0]">

        <Col :span="12">
          <FormItem label="企业名称">
            <Input
                v-model:value="queryParam.corpName"
                placeholder="请输入企业名称"
            />
          </FormItem>
        </Col>
        <Col :span="12" class="text-right">
          <Button type="primary" ghost @click="handleReset">重置</Button>
          <Button type="primary" @click="handleSearch">立即查询</Button>
        </Col>
      </Row>
    </Form>
    <div class="tbr-border">
      <Table
          :dataSource="dataSource"
          :columns="columns"
          :loading="loading"
          :pagination="pagination"
          :rowKey="(dataSource) => dataSource.safetyApplyId"
          @change="handleTableChange"
      >
        <template #num="{ index }">
            <span>{{
                (pagination.current - 1) * pagination.pageSize +
                parseInt(index) + 1
              }}</span>
        </template>

        <template #name="{ text, record }">
          <span class="bold mb0">{{ text }}</span>
          <p class="mb0 gray6">{{record.compCreditCode}}</p>
        </template>

        <template #result="{ text }">
          <Tag v-if="text" :color="ColorMapping[parseInt(text)].color">
            {{ColorMapping[parseInt(text)].text}}
          </Tag>
        </template>
        <template #date="{ text , record}">
          {{ parseTime(parseInt(record.pubSdate)) }} ~ {{ parseTime(parseInt(text)) }}
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" >
import {  Row, Col, Form, Input, Button, Table , Tag } from "ant-design-vue";
import { defineComponent, ref, onMounted, reactive } from "vue";
import { getAptSafetyList , ColorMapping , pageConfig } from '/@/api/public';
import { parseTime } from '/@/utils';

interface queryConfig {
  colType: string;
  corpName: string;
  current: number;
  size: number;
}

export default defineComponent({
  name: "aptNotice",
  components: {
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Tag,
    Input,
    Button,
    Table
  },
  setup() {
    const dataSource = ref<unknown[]>([])
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })

    const loading = ref<boolean>(true);
    let queryParam = reactive<queryConfig>({
      colType: '1',
      corpName: "",
      current: 1,
      size: 10
    })

    const tabChange = () => {
      getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }

    const getTableList = async () => {
      loading.value = true;
      let data = await getAptSafetyList(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records;
      loading.value = false;
    }



    const handleSearch = async () => {
      paginationRef.value.current =  1;
      queryParam.current = 1;
      await getTableList();
    }

    const handleReset = () => {
      paginationRef.value.current =  1;
      Object.assign(queryParam,{
        corpName: "",
        current: 1
      })
      getTableList();
    }

    onMounted(() => {
      getTableList();
    });

    const columns = [
      {
        title: "序号",
        width:100,
        align:"center",
        slots: { customRender: 'num' }
      },
      {
        title: "企业名称",
        width: 280,
        dataIndex: "compName",
        slots: { customRender: 'name' }
      },

      {
        title: "业务类型",
        dataIndex: "bitemName",
      },
      {
        title: "公示结果",
        dataIndex: "nodeProcResult",
        slots: { customRender: 'result' }
      },
      {
        title: "公示期",
        dataIndex: "pubEdate",
        slots: { customRender: 'date' }
      }
    ]

    return {
      queryParam, dataSource, columns, loading, pagination: paginationRef ,ColorMapping,
      parseTime, tabChange, getTableList, handleSearch, handleReset, handleTableChange
    };

  },
});
</script>


<style lang="less" scoped>
.apt-table{
  padding: 15px 20px;

  .title2{
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E0E3EA;

    span{
      padding-left: 10px;
      line-height: 1;
      border-left: 4px solid #0078FF;
    }
  }
}

::v-deep(.ant-table){
  .ant-table-body {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }

  .ant-table-placeholder {
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
  }
}

::v-deep(.ant-tabs){
  .ant-tabs-left-bar{
    width: 100%;
  }
}

</style>


